<template>
  <div class="layui-card-body" style="height: 600px">
    <h1 style="position: relative;left: 42%;margin: 15px;">章节目录</h1>
    {foreach name="kss" key="k" item="v"}
    {if condition="$kc.kcid eq $v.ofkc"}


    <ul style="width: 800px;height: 45px;position: relative;left: 25%;margin: 15px 10px;background-color: #edf1f5;">

      <li style="padding: 11px;">

        <i  class="layui-icon layui-icon-username"></i>
        <a href="{:url('home/video',['no'=>$v.no,'kcid'=>$kc.kcid])}" ><h3 style="position: absolute ;top: 23% ;left: 8%">{$v.ksname}</h3></a>
        <i class="layui-icon layui-icon-video"style="position: absolute;left: 80%;"></i>
      </li>



    </ul>
    {/if}
    {/foreach}

  </div>
</template>

<script>
    export default {
        name: "mlzj",
        data(){
            return {
                clickIndex: 0,
                params: {}, // 路由参数
                videoSrc: '',
                videoList:[],
                api_url: 'http://www.xueyuanjiaoyu.com/api/'
            }
        },
        mounted(){
            this.params = this.$route.query
            this.getVideoUrl()
        },
        methods: {
            getVideoUrl(){
                this.$axios.post(this.api_url + 'home/courseList', this.params ).then(res => {
                    this.videoList = res.data.data
                    res.data.data.forEach(item=>{
                        if (this.params.no == item.no){
                            this.videoSrc = item.href
                            setTimeout(()=>{
                                this.$refs.videoRef.play()
                            },50)

                        }
                    })
                })
            },
            clickItem(href,index){
                this.clickIndex = index
                this.videoSrc = href
                setTimeout(()=>{
                    this.$refs.videoRef.play()
                },50)
            }
        }
    }
</script>

<style scoped>

</style>
